<div class="dataTable">
  <div class="title">{{'DataManagement.TechnicalAlarmReport.TechnicalAlarmReport' | translate}}</div>

  <div class="table-content">
    <div class="report_filter">
      <div style="display: flex;align-items: center">
        <div style="margin-right: 10px;">{{'DataManagement.TechnicalAlarmReport.TimeRange' | translate}}
        </div>
        <!-- <nz-range-picker nzFormat="yyyy-MM-dd" nzSize="default" [(ngModel)]="dateRange" (nzOnOk)="onOk($event)"
        (ngModelChange)="onChange($event)"></nz-range-picker> -->
        <nz-range-picker nzFormat="yyyy-MM-dd" [nzPlaceHolder]="['Start Time', 'End Time']" [(ngModel)]="dateRange"
          (ngModelChange)="onChange($event)" (nzOnOk)="onOk($event)" [nzDisabledDate]="disabledDate"
          [nzDisabledTime]="disabledRangeTime" [nzFormat]="'yyyy/MM/dd'">
        </nz-range-picker>
      </div>
      <!-- <div class="searchButton" (click)="search()">{{'DataManagement.IntersectionTrafficVolumeReport.Search' | translate}}
    </div> -->
      <button nz-button nzType="primary" (click)="search()"><i nz-icon nzType="search"
          nzTheme="outline"></i>{{'DataManagement.RoadCongestionReport.Search' | translate}}
      </button>
    </div>

    <div class="report">
      <div class="report_data" style="background: #272b4c;">
        <div class="report_title">
          {{'DataManagement.TechnicalAlarmReport.FaultRatiosByEquipmentType' | translate}}
        </div>
        <div echarts [options]="options" (chartInit)="onChartInit($event)" style="height: 240px;"></div>
      </div>


      <div class="report_data" style="background: #272b4c;">
        <div class="report_title">
          {{'DataManagement.TechnicalAlarmReport.FaultRatiosByFaultType' | translate}}
        </div>
        <div echarts [options]="option1" (chartInit)="onChartInit1($event)"  style="height: 240px;"></div>
      </div>
    </div>

    <div class="report">
      <div class="report_data" style="background: #272b4c;">
        <div class="report_title">
          {{'DataManagement.TechnicalAlarmReport.FaultRatiosByEquipmentInstance' | translate}}
        </div>
        <div echarts [options]="option2" (chartInit)="onChartInit2($event)"  style="height: 240px;"></div>
      </div>
      <div class="report_data" style="background: #272b4c;">
        <div class="report_title">
          {{'DataManagement.TechnicalAlarmReport.FaultTimeByRunningTime' | translate}}
        </div>
        <div echarts [options]="option3" (chartInit)="onChartInit3($event)"  style="height: 240px;"></div>
      </div>
    </div>
  </div>

</div>